<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>上传凭证</title>
	<!-- 引入Mui -->
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/pic_look.css">
	<!-- 引入公共样式 -->
    <link rel="stylesheet" href="css/public.css">
    <style>
        .up_loader_text{
            background: #fff; 
            margin-top: -10px;  
            padding-top: 10px;
            padding-bottom: 5%;
        }
        .text_red{
            color: #dd524d;
            margin: 10px;
        }
        .case img{
            width: 100%;
        }
        .case div{
            padding: 10px;
        }
        #uploadForm{
            text-align: center
        }
        #uploadForm img{
            border: dashed 2px #d7d7d7;
        }
        #uploadForm .hied_input{
            display: none; 
            position: fixed;
            top: -99999999999px;           
        }
        #uploadForm div{
            padding: 10px;
        }
        .mui-btn{
            margin-bottom: 20px !important;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
	<header id="header" class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">上传凭证</h1>
	</header>
    <!-- 头部 结束 -->
    <div class="mui-content">
        <!-- 要求文本开始 -->
        <div class="up_loader_text">
            <div class="mui-content-padded">
                <p>要求:</p>
                <p>1.要求对所有人可见，保存图片后上传朋友圈并加上文字。</p>
                <p>2.上传朋友圈2小时以后截图上传即可，审核通过后就可以得到相应奖励。</p>
            </div>
        </div>
        <!-- 要求文本结束 -->
        <!-- 样例开始 -->
        <div class="mui-row case">
            <p class="text_red">样例：</p>
            <div class="mui-col-sm-6 mui-col-xs-6">
                <img src="img/uploader1.png" class="mui-media-object">
            </div>
            <div class="mui-col-sm-6 mui-col-xs-6">
                <img src="img/uploader2.png" class="mui-media-object">
            </div>
        </div>
        <!-- 样例结束 -->
        <!-- 上传模块开始 -->
        <div>
            <p>上传凭证：</p>
            <form id='uploadForm' enctype="multipart/form-data" class="mui-row" onsubmit="return false">
                <div class="mui-col-sm-6 mui-col-xs-6" >
                    <img src="img/pic_img.png" class="mui-media-object"  id="pic1">
                </div>
                <div class="mui-col-sm-6 mui-col-xs-6">
                    <img src="img/pic_img.png" class="mui-media-object" id="pic2">
                </div>
                <input type="file" name="uploader_pic1" accept="image/*"  class='hied_input' id="pick_img1">
                <input type="file" name="uploader_pic2" accept="image/*"  class='hied_input' id="pick_img2">
<!--                <input type="file" name="" accept="image/*"  class='' id="">-->
                <input type="submit" value="上传图片" class="mui-btn mui-btn-primary mui-btn-block" id="uploader_btn">
            </form>
        </div>
        <!-- 上传模块结束 -->
    </div>
    <script src="js/jquery.min.js"></script> 
	<script src="js/mui.min.js"></script> 
    <script src="js/doT.js"></script>
    <!-- 以上为引入第三方插件 -->
    <!-- trigger('clcik') -->
    <script>
    //点击图片上传
        $('#pic1').click(function(e){
            $('#pick_img1').trigger('click');
            $('#pick_img1').on("change",function(){
                $('#pic1').attr("style", "width:100%;height:18rem;border:none;");
                $('#pic1').attr("src", URL.createObjectURL(event.target.files[0]));
                console.log(URL.createObjectURL(event.target.files[0]))
            });
        });
        $('#pic2').click(function(e){
            $('#pick_img2').trigger('click');
            $('#pick_img2').on("change",function(){
                $('#pic2').attr("style", "width:100%;height:18rem;border:none;");
                $('#pic2').attr("src", URL.createObjectURL(event.target.files[0]));
            });
        });
        //使用axja 上传
        $("#uploader_btn").click(function(){
            if($('#pick_img1').val() != '' && $('#pick_img2').val() != ''){
                    var formData = new FormData($('#uploadForm')[0]); //处理为fromData
                    // console.log(formData);
                    $.ajax({
                    url: '/xxxxxx/',
                    type: 'POST',
                    data: formData,
                    async: true,
                    cache: false,
                    contentType: false,
                    processData: false,
                    // 成功
                    success: function(data) {
                        // if (data.status_code == 500) {
                        //     mui.alert("上传失败，点击图片重新选择");
                        // } else if (data.status_code == 400) {
                        //     mui.alert('请选择正确的图片类型');
                        // } else {
                        //     mui.alert('上传成功')
                        // }
                        console.log(data)
                    }
                })
            }else{
                mui.alert('请选择两张图片');
                return false
            }
        });
    </script>
</body>
</html>